import React, { Component } from 'react'
import { connect } from 'react-redux'
import { ReplayAction } from '@act'
import { EventCenter } from '@utils/Global'
const { toggleShowType } = ReplayAction

class LoadError extends Component {
  clickBtn() {
    const { dispatch } = this.props
    dispatch(toggleShowType('mediaError', false))
    EventCenter.emit('re_get_replay_audio')
  }
  render() {
    const { show } = this.props
    return (
      <div style={{display: show ? 'block' : 'none'}} className="no_audio">
        <div className="no_audio_inner">
          <div className="top">获取音频失败</div>
          <div className="bottom">
            <div onClick={this.clickBtn.bind(this)} className="bottom_btn">重试</div>
          </div>
        </div>
      </div>
    )
  }
}

const mapState = (state) => {
  return {
    show: state.ReplayState.showType.mediaError
  }
}

export default connect(mapState)(LoadError)
